<template>
  <div class="assign-role">
    <div class="role-list">
      <!-- 角色列表 -->
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
        <!-- <el-checkbox label="复选框 A" />
        <el-checkbox label="复选框 B" />
        <el-checkbox label="复选框 C" />
        <el-checkbox label="禁用" disabled />
        <el-checkbox label="选中且禁用" disabled /> -->
      </el-checkbox-group>
    </div>
    <div>
      <el-button type="primary" round @click="onsubmit">确定</el-button>
      <el-button round @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getRolesListRequest } from '@/api/setting'
import { userAssignRolesRequest, userInfoDetailRequest } from '@/api/user'
export default {
  name: 'VueHr85AssignRole',
  props: {
    currentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      checkList: []
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    async getRolesList() {
      try {
        // 1.这个是获取所有角色列表的请求
        const res = await getRolesListRequest({ page: 1, pagesize: 1000 })
        if (res.success) {
          this.list = res.data.rows
        } else {
          // 如果请求成功，但是业务失败
          this.$message.error(res.message)
        }

        // 下面是根据id获取用户信息的接口
        // 根据id获取用户详情的接口,主要是用来得到接口里面的roleidz值的,做数据回显
        const res2 = await userInfoDetailRequest(this.currentId)
        if (res2.success) {
          this.checkList = res2.data.roleIds
        //   this.checkList = null
        } else {
          onsubmit
          this.$message.error(res2.message || '根据id获取用户信息的 接口失败')
        }
      } catch (error) {
        this.$message.error('获取角色列表失败')
      }
    },
    cancel() {
      // 子组件向外抛出一个事件
      this.$emit('close')
    },
    async onsubmit() {
      try {
        const res = await userAssignRolesRequest({
          id: this.currentId,
          roleIds: this.checkList
        })
        if (res.success) {
          // 关闭弹出框
          this.cancel()
        } else {
          this.$message.error('分配角色的接口错误')
        }
      } catch (error) {
        console.log('userAssignRolesRequest')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
